<ui:composition template="../principal.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="principal">
        <h2>Agenda do Dentista</h2>
        
        <h:form id="breadcrumb">
            <p:breadCrumb styleClass="navegacao" style="margin-top: 5px; margin-bottom: 40px">  
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'AD'}" >  
                    <p:menuitem value="Categories" url="../user-master/menuMaster.xhtml" />  
                </c:if>
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'DE'}" >  
                    <p:menuitem value="Categories" url="../user-simple/menuDentista.xhtml" />  
                </c:if>
                <p:menuitem value="Agenda" url="../dentista/gerenciarAgenda.xhtml" />  
            </p:breadCrumb>
        </h:form>

        <h:form id="agenda">
            <p:growl id="message"/>
            <p:schedule id="agenda" value="#{gerenciarAgendaMB.eventModel}" widgetVar="myschedule" locale="pt" 
                        axisFormat="H:mm" timeFormat="H:mm" resizable="false" draggable="false" >  
                <p:ajax event="eventSelect" listener="#{gerenciarAgendaMB.onEventSelect}" update=":dados" oncomplete="eventDialog.show()" />
            </p:schedule>
        </h:form>

        <h:form id="dados">
            <p:dialog header="Detalhes do Atendimento" widgetVar="eventDialog" resizable="false" id="eventDlg" dynamic="true" 
                      showEffect="fade" hideEffect="fade" modal="true">
                <h:panelGrid id="display" columns="2" cellspacing="4" width="400"> 

                    <p:tabView id="tabView">  

                        <p:tab id="tab1" title="Paciente">  
                            <h:panelGrid columns="2" cellpadding="10" width="600">
                                <h:graphicImage library="pacientes" name="#{gerenciarAgendaMB.compromissoSelecionado.paciente.foto}" class="img-pessoa"/>
                                <h:panelGrid columns="2" cellspacing="10"> 

                                    <h:outputText value="NOME: " styleClass="rotulo" />
                                    <h:outputText value="#{gerenciarAgendaMB.compromissoSelecionado.paciente.nome} #{gerenciarTratamentoMB.tratamentoSelecionado.paciente.sobrenome}" style="font-weight:bold"/>
                                    <h:outputText value="DATA DE NASCIMENTO: " styleClass="rotulo" />
                                    <h:outputText value="#{gerenciarAgendaMB.compromissoSelecionado.paciente.data_nascimento}"  style="font-weight:bold">
                                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                                    </h:outputText> 
                                    <h:outputText value="SEXO: " styleClass="rotulo"/>
                                    <h:outputText value="#{gerenciarAgendaMB.compromissoSelecionado.paciente.sexo}" style="font-weight:bold"/>
                                    <h:outputText value="PROFISSÃO: " styleClass="rotulo"/>
                                    <h:outputText value="#{gerenciarAgendaMB.compromissoSelecionado.paciente.profissao}" style="font-weight:bold"/>
                                    <h:outputText value="CPF: " styleClass="rotulo"/>
                                    <h:outputText value="#{gerenciarAgendaMB.compromissoSelecionado.paciente.cpf}" style="font-weight:bold"/>
                                    <h:outputText value="RG: " styleClass="rotulo"/>
                                    <h:outputText value="#{gerenciarAgendaMB.compromissoSelecionado.paciente.rg}" style="font-weight:bold"/>
                                </h:panelGrid>
                            </h:panelGrid>
                        </p:tab>  

                        <p:tab id="tab2" title="Serviços">  
                            <h:panelGrid columns="1" cellpadding="10" width="600">
                                <h:panelGrid columns="1" cellspacing="4">
                                    <p:dataTable id="servicos-prestados" var="serv" value="#{gerenciarAgendaMB.compromissoSelecionado.servicosPrestados}" style="width: 585px;" emptyMessage="Sem serviços cadastrados" 
                                                 paginator="true" rows="5" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                                 rowsPerPageTemplate="5,10,15" paginatorPosition="bottom" paginatorAlwaysVisible="false">  
                                        <p:column headerText="Serviços Selecionados">
                                            <h:graphicImage library="images" name="servicos.png"/>
                                            <h:outputText value="    #{serv.servico.nome}, Quantidade:#{serv.quantidade}, Valor: R$ #{serv.valor}" />
                                        </p:column>
                                    </p:dataTable>
                                </h:panelGrid>
                            </h:panelGrid>  
                        </p:tab>  

                        <p:tab id="tab3" title="Outros">  
                            <h:panelGrid columns="1" cellspacing="10" width="600">
                                <h:outputText value="DESCRIÇÃO DO ATENDIMENTO: " />
                                <h:outputText value="#{gerenciarAgendaMB.compromissoSelecionado.atendimento.descricao}" style="font-weight:bold"/>
                                <h:outputText value="OBSERVAÇÃO: " />
                                <h:outputText value="#{gerenciarAgendaMB.compromissoSelecionado.observacao}" style="font-weight:bold"/>
                            </h:panelGrid>  
                        </p:tab>
                    </p:tabView>  

                </h:panelGrid>
            </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>